<template>
  <div>
    <el-table style="width: 100%" :data="tableData" @cell-dblclick="handle">
      <el-table-column prop="id" label="宠物ID" width="80"></el-table-column>
      <el-table-column prop="name" label="昵称" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
          <div v-else>
            <el-input v-model="scope.row.name"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="宠物详情" width="300">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.title }}</div>
          <div v-else>
            <el-input v-model="scope.row.title"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="variety" label="宠物种类" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.variety }}</div>
          <div v-else>
            <el-input v-model="scope.row.variety"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.age }}</div>
          <div v-else>
            <el-input v-model="scope.row.age"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="adoptway" label="领养方式" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.adoptway }}</div>
          <div v-else>
            <el-input v-model="scope.row.adoptway"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="detail" label="是否疫苗" width="100">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.detail}}</div>
          <div v-else>
            <el-input v-model="scope.row.detail"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="130">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.tel}}</div>
          <div v-else>
            <el-input v-model="scope.row.tel"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="按钮">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)">{{
            scope.row.isEdit ? "完成" : "编辑"
          }}</el-button>
          <el-button @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      data: null,
      activeName: "second",
    };
  },
  methods: {
    handleClick(row) {
      if (row.isEdit) {
        this.$delete(row, "isEdit");
        console.log(row);
        const params = `id=${row.id}&name=${row.name}&title=${row.title}&variety=${row.variety}&age=${row.age}&adoptway=${row.adoptway}&detail=${row.detail}&tel=${row.tel}`;
        this.axios.put("/pets/pets_change", params).then((res) => {
          console.log(res);
        });
      } else {
        this.$set(row, "isEdit", true);
      }
      console.log(this.tableData);
    },
    handle(row, column, cell, event) {},
    deleteUser(index, row) {
      console.log(index, row);

      let _this = this;
      if (!(index + 1)) {
        _this.$message.error("用户有误，请刷新后重试");
        return;
      } else {
        _this
          .$confirm("确定要删除此用户吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(function () {
            let goodIndex = 0;
            _this.tableData.forEach((item, id) => {
              console.log(item, id);
              if (item.id === index + 1) {
                goodIndex = id;
                console.log(goodIndex);
              }
            });
            _this.tableData.splice(goodIndex, 1);
            const params = `${row.id}`;
            console.log("params", params);
            _this.axios.delete("/pets/" + params).then((res) => {
              console.log(res);
            });
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
  },
  mounted() {

    this.axios.get("/pets/pets_detail?category=dog").then((res) => {
      console.log(res.data.data);
      this.tableData = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>